<template>
  <div class="tx-list-table">
    <el-table
      ref="table"
      aria-rowspan="0"
      :data="table.page.records"
      tooltip-effect="light"
      :row-class-name="tableRowClassNameInit"  
      :row-style="tableRowStyle"
      :height="height"
      style="width: 100%; background: transparent"
      header-row-class-name="tx-list-table-header"
      @sort-change="handleSortChange"
      @selection-change="handleSelectionChange"
      @row-click="showRow"
      :header-align="headerAlign"
      @current-change="handleSelectionCurrentChange"
    >
      <slot />
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    table: {
      type: Object,
      default() {
        return {
          page: {
            ascs: [],
            descs: [],
            records: [],
          },
        };
      },
    },
    headerAlign: {
      default: "center",
    },
    sorts: {
      type: Object,
      default() {
        return {};
      },
    },
    height: [String, Number],
    tableRowStyle: {
      default() {
        return {};
      },
    },
  },
  data() {
    return {};
  },
  mounted() {},
  computed:{

  },
  methods: {
    tableRowClassNameInit({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "success-row";
      }
      return "";
    },
    showRow(row) {
      this.$emit("row-click", row);
    },
    handleSelectionCurrentChange(row) {
      this.$emit("current-change", row);
    },
    handleSelectionChange(rows) {
      this.$emit("selection-change", rows);
    },
    clearSelection() {
      this.$refs.table.clearSelection();
    },
    handleSortChange(param) {
      let sortName = this.sorts[param.prop]
        ? this.sorts[param.prop]
        : param.prop;
      this.table.page.ascs = [];
      this.table.page.descs = [];
      if (param.order === "ascending") {
        this.table.page.ascs = [sortName];
      } else if (param.order == "descending") {
        this.table.page.descs = [sortName];
      } else {
        this.table.page.ascs = this.table.sort.ascs;
        this.table.page.descs = this.table.sort.descs;
      }
      this.$emit("sort-change", param);
    },
  },
};
</script>

<style lang="scss">
@import "../../../style/variables.scss";
$header-color: $tx-list-table-header-color;
$header-color-select: $tx-color-primary;
.tx-list-table {
  margin: 15px 0px;

  // .el-table__body tr:hover > td,
  // .el-table__body tr:hover a {
  //   // background-color: $tx-list-table-header-color;
  //   // color: $c-bg-top;
  // }
  .el-table {
    color: $c-font-table;
    border: 0;
    .el-tooltip {
      width: auto !important;
    }
    &::before {
      background: transparent;
    }
  }
  // .el-table tr
  .el-table tr {
    background: rgb(29 63 106);
    // background-color: $tx-list-table-background;
    // background: #1d5a8f;
    // opacity: .5;
    // border: 1px solid rgba(61, 126, 165, 0.9);
    // box-shadow: inset 0px 0px 5px #51789a;

    &.success-row {
      box-shadow: inset 0px 0px 2px #4a729e;
      background: #274a77;
      //   // &:hover {
      //   //   box-shadow: inset 0px 0px 15px #0e3969 !important;
      //   //   background: #285584 !important;
      //   //   td {
      //   //     background: #285584 !important;
      //   //   }
      //   // }
    }
    &:hover {
      // cursor: pointer;
      box-shadow: inset 0px 0px 10px #38c2c6 !important;
      background: #285584 !important;

      td {
        background: #28558400 !important;
        // box-shadow: inset 0px 0px 0px transparent !important;
      }
    }
    // td {
    //   opacity: 1;
    // }
  }

  .el-table th {
    background-color: $tx-list-table-header-background !important;
    color: #fff;
    border: 0;
    > .cell {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      color: $header-color;
    }
  }
  .el-table--border th,
  .el-table--border td {
    // border-right: 1px solid $tx-list-table-border;
    // border-bottom: 1px solid $tx-list-table-border;
    border: 0 !important;
  }
  .el-table td.el-table__cell {
    border: 0;
  }
  .el-table th.el-table__cell.is-leaf {
    border: 0;
  }
  .el-table--border {
    // border-top: 1px solid $tx-list-table-border;
    // border-left: 1px solid $tx-list-table-border;
    border: 0;
  }

  .el-table .caret-wrapper .descending {
    // border-top-color: $header-color;
  }
  .el-table .caret-wrapper .ascending {
    // border-bottom-color: $header-color;
  }
  .el-table .descending .caret-wrapper .descending {
    // border-top-color: $header-color-select;
  }
  .el-table .ascending .caret-wrapper .ascending {
    // border-bottom-color: $header-color-select;
  }

  .cell {
    .el-button--text {
      padding-top: 0px;
      padding-bottom: 0px;
      margin-left: 5px;
    }
  }
  .el-table__cell .cell .tx-table-column-action {
    display: inline;
    a {
      margin-left: 0px;
    }
    .el-button--text {
      margin-left: 0px;
    }
  }
  .el-input__inner {
    font-size: 14px;
  }

  .tx-list-table-header {
    .cell {
      white-space: nowrap;
    }
  }
  .el-loading-mask .el-loading-spinner {
    top: 10%;
  }
}
</style>
